<!--
 * @Author: your name
 * @Date: 2022-11-16 15:30:35
 * @LastEditTime: 2023-03-08 10:15:09
 * @LastEditors: yuhan
 * @Description: 
 * @FilePath: \apiadmin\src\views\overview\index.vue
-->
<template>
  <div class="overview-page">
    <!-- <h1 class="title bottom-in-slow">欢迎进入{{ projectInfo.projectName }}项目</h1> -->
    <div class="page-content bottom-in-slow">
      <el-card class="box-card1">
        <div class="card1-content">
          <div class="card1-api-box" v-loading="apiBox.loading">
            <div class="card1-chart-box">
              <!-- <h3 class="chart-title"></h3> -->
              <Echarts
                v-if="apiBox.chartData && apiBox.chartData.length > 0"
                :index="10"
                :title="`API数量：${apiBox.total}`"
                headerIcon=""
                :style="{
                  height: '100%',
                }"
                :options="{
                  tooltip: {
                    trigger: 'item',
                  },
                  series: [
                    {
                      name: 'api',
                      type: 'pie',
                      radius: ['45%', '55%'],
                      top: '0',
                      left: '-55%',
                      avoidLabelOverlap: false,
                      itemStyle: {
                        borderRadius: 10,
                        borderColor: 'rgba(255, 255, 255, 0)',
                        borderWidth: 2,
                      },
                      label: {
                        show: false,
                        position: 'center',
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '14',
                        },
                      },
                      labelLine: {
                        show: false,
                      },
                      data: apiBox.chartData,
                    },
                  ],
                  legend: {
                    show: true,
                    width: '40px',
                    right: '2%',
                    top: '18%',
                    align: 'left',
                    itemGap: 10,
                    // icon: 'rect',
                    itemWidth: 13,
                    itemHeight: 7,
                    // symbolKeepAspect: false,
                    textStyle: {
                      color: '#606266',
                      borderWidth: 53, // 间距的宽度
                    },
                    formatter: (name) => {
                      const value = apiBox.chartData.find((item) => item.name === name).value;
                      return `${name}：${value} 个`;
                    },
                  },
                }"
              />
            </div>
            <div class="card1-data-box">
              <!-- {{ apiBox.data }} -->
              <el-table :data="apiBox.data" border height="240px" style="width: 100%">
                <el-table-column
                  prop="name"
                  label="API名称"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    {{ scope.row.name || "-" }}
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" align="center" min-width="110px">
                  <template #default="scope">
                    <el-tag
                      style="border-width: 0"
                      :color="getDataTypeColor(scope.row.type)"
                      effect="dark"
                      >{{ getDataTypeLabel(scope.row.type) || "-" }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="updatedTime" label="修改时间" align="center" width="160px">
                  <template #default="scope">
                    {{ formatTime(scope.row.updatedTime, "YYYY-MM-DD hh:mm:ss") }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="card1-item-box">
            <div class="card1-item" v-loading="indexConfigBox.loading">
              <div class="card1-item-title">指标总数</div>
              <div class="card1-item-total">
                <CountTo
                  class="count"
                  :startVal="0"
                  :endVal="indexConfigBox.total"
                  :duration="2000"
                ></CountTo>
                个
              </div>
            </div>
            <div class="card1-item" v-loading="tokenBox.loading">
              <div class="card1-item-title">token总数</div>
              <div class="card1-item-total">
                <CountTo
                  class="count"
                  :startVal="0"
                  :endVal="tokenBox.total"
                  :duration="2000"
                ></CountTo>
                个
              </div>
            </div>
            <div class="card1-item" v-loading="dataSourceBox.loading">
              <div class="card1-item-title">数据源总数</div>
              <div class="card1-item-total">
                <CountTo
                  class="count"
                  :startVal="0"
                  :endVal="dataSourceBox.total"
                  :duration="2000"
                ></CountTo
                >个
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card2">
        <div class="card2-content">
          <div class="card2-item-box">
            <div
              class="card2-item"
              :class="{ isActive: carouselActiveItem === 2 }"
              v-loading="websocketBox.loading"
              @click="setCarouselActiveItem(carouselOption[2].name)"
            >
              <div class="card2-item-title">websocket总数</div>
              <div class="card2-item-total">
                <CountTo
                  class="count"
                  :startVal="0"
                  :endVal="websocketBox.total"
                  :duration="2000"
                ></CountTo>
                个
              </div>
            </div>
            <div
              class="card2-item"
              :class="{ isActive: carouselActiveItem === 3 }"
              v-loading="sqlScriptBox.loading"
              @click="setCarouselActiveItem(carouselOption[3].name)"
            >
              <div class="card2-item-title">sql脚本总数</div>
              <div class="card2-item-total">
                <CountTo
                  class="count"
                  :startVal="0"
                  :endVal="sqlScriptBox.total"
                  :duration="2000"
                ></CountTo>
                个
              </div>
            </div>
          </div>
          <div class="card2-data-box">
            <el-carousel
              ref="carousel"
              :interval="4000"
              height="160px"
              trigger="click"
              :autoplay="false"
              @change="carouselChange"
            >
              <!-- websocket -->
              <el-carousel-item
                :style="{ 'z-index': carouselActiveItem === 2 ? 2 : 1 }"
                name="websocket"
                key="websocket"
              >
                <el-table
                  v-loading="websocketBox.loading"
                  :data="websocketBox.data"
                  height="160px"
                  style="width: 100%"
                >
                  <el-table-column
                    prop="name"
                    label="websocket名称"
                    align="center"
                    min-width="120px"
                    show-overflow-tooltip
                  >
                    <template #default="scope">
                      {{ scope.row.name || "-" }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="updatedTime" label="修改时间" align="center" width="160px">
                    <template #default="scope">
                      {{ formatTime(scope.row.updatedTime, "YYYY-MM-DD hh:mm:ss") }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-carousel-item>
              <!-- sql脚本 -->
              <el-carousel-item
                :style="{ 'z-index': carouselActiveItem === 3 ? 2 : 1 }"
                name="sqlScript"
                key="sqlScript"
              >
                <el-table
                  v-loading="sqlScriptBox.loading"
                  :data="sqlScriptBox.data"
                  height="160px"
                  style="width: 100%"
                >
                  <el-table-column
                    prop="name"
                    label="sql脚本名称"
                    align="center"
                    min-width="120px"
                    show-overflow-tooltip
                  >
                    <template #default="scope">
                      {{ scope.row.name || "-" }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="updatedTime" label="修改时间" align="center" width="160px">
                    <template #default="scope">
                      {{ formatTime(scope.row.updatedTime, "YYYY-MM-DD hh:mm:ss") }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import apiUrl from "@/config/api.mjs";
import { onMounted, computed, ref } from "vue";
import { getFormDataUrl, formatTime } from "@/utils/index.js";
import { ElMessage } from "element-plus";
import pageconfig from "@/config/pageConfig.js";
import { CountTo } from "vue3-count-to";
const store = useStore();
const projectInfo = computed(() => {
  return store.getters["project/row"];
});
// 走马灯
const carousel = ref(null);
// api数据相关
const apiBox = ref({
  loading: false,
  data: [],
  total: 0,
  chartData: [],
});
// 获取数据类型label
const getDataTypeLabel = (key) => {
  return pageconfig.apiPage_config._enum.dataType.find((item) => item.key === key)?.value || "-";
};
// 获取数据类型tag的color
const getDataTypeColor = (type) => {
  let color = "";
  switch (type) {
    case 0:
      color = "#84a2fe";
      break;
    case 1:
      color = "#22c3aa";
      break;
    case 2:
      color = "#7bd9a5";
      break;
    case 3:
      color = "#d0648a";
      break;
    case 4:
      color = "#f58db2";
      break;
    case 5:
      color = "#f2b3c9";
      break;
  }
  return color;
};
// api列表
const getApiPathList = () => {
  apiBox.value.loading = true;
  getFormDataUrl("get", apiUrl.apiList.dataList, {
    pageNo: 1,
    pageSize: 999,
    projectId: projectInfo.value.id,
  })
    .then((res) => {
      if (res) {
        apiBox.value.data = res?.records || [];
        apiBox.value.total = res?.total || 0;
        apiBox.value.chartData = pageconfig.apiPage_config._enum.dataType.map((it) => {
          return {
            key: it.key,
            name: it.value,
            value: 0,
          };
        });
        const copyChartData = JSON.parse(JSON.stringify(apiBox.value.chartData));
        apiBox.value.data.forEach((item) => {
          let targetIndex = copyChartData.findIndex((dt) => dt.key === item.type);
          if (targetIndex !== -1) {
            apiBox.value.chartData[targetIndex].value++;
          }
        });
      } else {
        ElMessage.warning("res:", res);
      }
    })
    .finally(() => {
      apiBox.value.loading = false;
    });
};
// 指标数据相关
const indexConfigBox = ref({
  loading: false,
  data: [],
  total: 0,
});
// 指标列表
const getIndexConfigList = () => {
  indexConfigBox.value.loading = true;
  getFormDataUrl("get", apiUrl.indexConfig.dataList, {
    pageNo: 1,
    pageSize: 999,
    projectId: projectInfo.value.id,
  })
    .then((res) => {
      if (res) {
        indexConfigBox.value.data = res?.records || [];
        indexConfigBox.value.total = res?.total || 0;
      } else {
        ElMessage.warning("res:", res);
      }
    })
    .finally(() => {
      indexConfigBox.value.loading = false;
    });
};
// token数据相关
const tokenBox = ref({
  loading: false,
  data: [],
  total: 0,
});
// token列表
const getTokenList = () => {
  tokenBox.value.loading = true;
  getFormDataUrl("get", apiUrl.tokenAdmin.dataList, {
    pageNo: 1,
    pageSize: 999,
    projectId: projectInfo.value.id,
  })
    .then((res) => {
      if (res) {
        tokenBox.value.data = res?.records || [];
        tokenBox.value.total = res?.total || 0;
      } else {
        ElMessage.warning("res:", res);
      }
    })
    .finally(() => {
      tokenBox.value.loading = false;
    });
};
// dataSource数据相关
const dataSourceBox = ref({
  loading: false,
  data: [],
  total: 0,
});
// dataSource列表
const getDataSourceList = () => {
  dataSourceBox.value.loading = true;
  getFormDataUrl("get", apiUrl.dataSource.dataList, {
    pageNo: 1,
    pageSize: 999,
    projectId: projectInfo.value.id,
  })
    .then((res) => {
      if (res) {
        dataSourceBox.value.data = res?.records || [];
        dataSourceBox.value.total = res?.total || 0;
      } else {
        ElMessage.warning("res:", res);
      }
    })
    .finally(() => {
      dataSourceBox.value.loading = false;
    });
};
// websocket数据相关
const websocketBox = ref({
  loading: false,
  data: [],
  total: 0,
});
// websocket列表
const getWebsocketList = () => {
  websocketBox.value.loading = true;
  getFormDataUrl("get", apiUrl.websocketConfig.dataList, {
    pageNo: 1,
    pageSize: 999,
    projectId: projectInfo.value.id,
  })
    .then((res) => {
      if (res) {
        websocketBox.value.data = res?.records || [];
        websocketBox.value.total = res?.total || 0;
      } else {
        ElMessage.warning("res:", res);
      }
    })
    .finally(() => {
      websocketBox.value.loading = false;
    });
};
// sql脚本数据相关
const sqlScriptBox = ref({
  loading: false,
  data: [],
  total: 0,
});
// sqlScript列表
const getSqlScriptList = () => {
  sqlScriptBox.value.loading = true;
  getFormDataUrl("get", apiUrl.sqlScript.dataList, {
    pageNo: 1,
    pageSize: 999,
    projectId: projectInfo.value.id,
  })
    .then((res) => {
      if (res) {
        sqlScriptBox.value.data = res?.records || [];
        sqlScriptBox.value.total = res?.total || 0;
      } else {
        ElMessage.warning("res:", res);
      }
    })
    .finally(() => {
      sqlScriptBox.value.loading = false;
    });
};
const carouselOption = [
  {
    name: "websocket",
    value: "websocket",
  },
  {
    name: "sqlScript",
    value: "sqlScript",
  },
];
// 走马灯高亮项，用于同步设置卡片样式
const carouselActiveItem = ref(0);
// 设置走马灯高亮项
const setCarouselActiveItem = (name) => {
  carousel.value.setActiveItem(name);
};
// 走马灯切换，刷新carouselActiveItem
const carouselChange = (val) => {
  carouselActiveItem.value = val;
};
onMounted(() => {
  getApiPathList();
  getIndexConfigList();
  getTokenList();
  getDataSourceList();
  getWebsocketList();
  getSqlScriptList();
});
</script>
<style lang="scss" scoped>
.overview-page {
  .title {
    text-align: center;
    margin: 0;
  }
  .page-content {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .box-card1 {
      width: 860px;
      min-width: 860px;
      height: 462px;
      .card1-content {
        height: 420px;
        .card1-api-box {
          display: flex;
          justify-content: space-between;
          .card1-chart-box {
            width: 320px;
            height: 240px;
            .echart-card {
              height: 100%;
              :deep(.el-card__header) {
                padding: 5px;
              }
              :deep(.el-card__body) {
                height: calc(100% - 33px);
                padding: 5px;
              }
            }
          }
          .card1-data-box {
            width: 480px;
            height: 240px;
            overflow: auto;
          }
        }
        .card1-item-box {
          width: 100%;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          .card1-item {
            width: 260px;
            height: 160px;
            box-sizing: border-box;
            padding: 20px;
            background-color: #ecf5ff;
            border-radius: 4px;
            .card1-item-title {
              // color: #606266;
              color: #409eff;
              font-family: Georgia, "Times New Roman", Times, serif;
              font-size: 16px;
              font-weight: 600;
            }
            .card1-item-total {
              color: #077aff;
              margin: 30px;
              font-size: 30px;
              font-weight: bolder;
              text-align: center;
            }
          }
        }
      }
    }
    .box-card2 {
      width: 700px;
      min-width: 700px;
      height: 462px;
      .card2-content {
        height: 420px;
        .card2-item-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .card2-item {
            width: 320px;
            height: 110px;
            margin-bottom: 20px;
            box-sizing: border-box;
            padding: 20px;
            background-color: #ecf5ff;
            border-radius: 4px;
            transition: 0.5s;
            .card2-item-title {
              color: #409eff;
              font-family: Georgia, "Times New Roman", Times, serif;
              font-size: 16px;
              font-weight: 600;
            }
            .card2-item-total {
              color: #077aff;
              margin: 10px;
              font-size: 30px;
              font-weight: bolder;
              text-align: center;
            }
            &.isActive {
              box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.16);
            }
          }
        }
        .card2-data-box {
          height: 160px;
          box-sizing: border-box;
          .el-carousel__item {
            overflow: auto;
            :deep(.el-table) {
              border: 1px solid rgba(177, 179, 184, 0.4);
              border-radius: 4px;
              overflow: hidden;
              th {
                // background-color: #ecf5ff !important;
                background-color: #f5f7fa !important;
                // border: none !important;
              }
              .el-table__row {
                td {
                  border: none !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
